<!DOCTYPE html>
<html>

<head>
    <title>ROS2 WebSocket Test</title>
    <script src="https://zhaozhouyang.oss-cn-beijing.aliyuncs.com/blog/202505/roslib.min.js"></script>
</head>

<body>
    <h1>ROS2 WebSocket Bridge Test</h1>
    <button onclick="sendCommand()">发送 /test_cmd</button>

    <script>
        // 创建 ROS 实例
        const ros = new ROSLIB.Ros({
            url: 'ws://localhost:9090' // 改成你的 ROS 机器 IP
        });

        ros.on('connection', () => {
            console.log('连接成功');
        });

        ros.on('error', (error) => {
            console.error('连接错误: ', error);
        });

        ros.on('close', () => {
            console.log('连接关闭');
        });

        // 发布者：向 /test_cmd 发送字符串消息
        const testTopic = new ROSLIB.Topic({
            ros: ros,
            name: '/test_cmd',
            messageType: 'std_msgs/String'
        });

        function sendCommand() {
            const msg = new ROSLIB.Message({
                data: 'Hello from Browser'
            });
            testTopic.publish(msg);
        }

        // 订阅者：接收来自 /test_reply 的消息
        const replyTopic = new ROSLIB.Topic({
            ros: ros,
            name: '/test_reply',
            messageType: 'std_msgs/String'
        });

        replyTopic.subscribe((message) => {
            console.log('收到消息：', message.data);
        });
    </script>
</body>

</html>